<template>
      <div>
            <el-row>
                <!-- 上面空白的部分 -->
                  <el-col :xs="24" :md="24" :sm="24" :lg="24">
                        <div class="grid-content index-top"></div>
                  </el-col>
            </el-row>

            <!-- 中间的部分 -->
            <el-row>
                  <!-- 左边 -->
                  <el-col :xs="2" :md="9" :sm="4"><div class="grid-content"></div></el-col>
                  <!-- 内容部分 -->
                  <el-col :xs="20" :md="6" :sm="16">
                        <div class="grid-content index-middle">
                              <el-col :xs="24" :md="24">
                                    <div class="index-middle-top">
                                          Color颜色代码互转
                                          <el-tooltip class="item" effect="dark" content="将要进行转换的Color代码写入输入框，回车进行转换" placement="top-start">
                                                <i class="el-icon-question"></i>
                                          </el-tooltip>
                                    </div>
                                    <div class="grid-content index-middle-buttom">
                                          <div class="index-shadow index-roll">
                                                <el-col :span="24" class="color-item">
                                                      <el-col class="item-left" :span="10">Hex(十六进制):</el-col>
                                                      <el-col class="item-right" :span="12"><el-input v-model="hex" placeholder="展示颜色十六进制" @keyup.enter.native="submit"></el-input></el-col>
                                                </el-col>
                                                <el-col :span="24" class="color-item">
                                                      <el-col class="item-left" :span="10">RGB:</el-col>
                                                      <el-col class="item-right" :span="12"><el-input v-model="rgb" placeholder="展示颜色RGB" @keyup.enter.native="submit"></el-input></el-col>
                                                </el-col>
                                                <el-col :span="24" class="color-item">
                                                      <el-col class="item-left" :span="10">Int:</el-col>
                                                      <el-col class="item-right" :span="12"><el-input v-model="Int" placeholder="展示颜色Int" @keyup.enter.native="submit"></el-input></el-col>
                                                </el-col>
                                                <el-button type="primary" round @click.native="$router.push('/index')" class="color-edit">返回博客</el-button>
                                          </div>
                                    </div>
                              </el-col>
                        </div>
                  </el-col>
                  <!-- 右边 -->
                  <el-col :xs="2" :md="9" :sm="4">
                        <div class="grid-content">
                        </div>
                  </el-col>
            </el-row>
      </div>
</template>

<script>
export default {
      props: [],
      data() {
            return {
                  hex:'',
                  rgb:'',
                  Int:''
            }
      },
      methods:{
            submit(e){
                  this.$root.loading=true;
                  let value=e.target.value;
                  value=value.replace('#','%23');
                  console.log(this.$url+'/color/'+value);
                  this.$axios.get(this.$url+'/color/'+value).then(
                        response=>{
                              if(response.data.status.code==200){
                                    this.hex=response.data.data.hex
                                    this.rgb=response.data.data.rgb
                                    this.Int=response.data.data.int
                              }else{
                                    this.$message({
                                          type:'info',
                                          message:response.data.status.message
                                    })
                              }
                              this.$root.loading=false;
                        
                        }

                  )
            }
      }
};
</script>

<style lang="less" scoped>
/**禁止选中文字 */
div {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** 博客上面空白处 */
.grid-content {
    min-height: 28px;
}
.index-top {
    height: 14vh;
}

/** 中间内容 */
.index-middle {
    height: 65vh;
    border-radius: 8px;
}
/* 上方导航栏 */
.index-middle-top {
    font-family: sans-serif;
    font-size: 14px;
    height: 35px;
    border-radius: 25px;
    margin-bottom: 20px;
    box-shadow: 3px 3px 8px #bbc0c0;
    overflow: hidden;

    line-height: 35px;
    font-weight: 700;
}
.menu-item {
    line-height: 35px;
    cursor: pointer;
}
.menu-item:hover {
    /* inset 是内部阴影 默认是外部阴影outset */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
}
.selecton {
    /* 导航栏被选中样式 */
    color: #409eff;
    font-weight: bold;
}

/* 呈现内容部分 */
.index-middle-buttom {
    border-radius: 8px;
    box-shadow: 3px 3px 8px #bbc0c0;
}
.index-shadow {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: -8px 0 8px white;
    height: 60vh;
    letter-spacing: 2px;

    font-size: 0.8rem;
    font-weight: 700;
}
.index-public{
    font-size: 14px;
    font-weight: 700;
}

/** 关于 */
.index-about-text{
    padding: 15px;
    text-indent:2em;
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    height: 56vh;
    font-weight: 700;
}
.index-about-text p{
    margin-top: 10px;
}
.index-about-text p .index-about-message{
    cursor: pointer;
    color: #00C4EB;
}
.index-about-span{
    padding-left: 50px;
}

/* 首页上半个背景部分 */
.index-bg {
    /* box-shadow: -3px -2px 8px white; */
    height: 30vh;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: url("https://tworice.cn/index-bg.jpg");
}
.index-bg img {
    width: auto;
    height: 45%;
    border-radius: 50%;
    margin-top: 23vh;
}

/* 首页内容的下半部分 */
.index-bg-context {
    height: 30vh;
}
.index-bg-context h3 {
    padding-top: 10vh;

}

/** 联系方法 */
.contact-main {
    height: 12vh;
    display: flex;
    /* 让一行中的元素平均分配宽度 */
    justify-content: space-around;
    align-items: center;
    /* 元素在一行放不下时自动换行 */
    flex-wrap: wrap;
}
.contact-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* 让元素垂直排列 这里就是让包含图片的div和文字垂直排列 */
    flex-direction: column;
    height: 140px;

    padding: 20px 20px;
}
.contact-item p{
    // 站点名称
    font-size: 8px;
    color: slategrey;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2;  /* 设置行数 */
	-webkit-box-orient: vertical;

}
.contact-icon {
    /* 鼠标放上去变成小手 */
    cursor: pointer;
    /* 这里让图片在盒子里垂直+水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    /* 圆角属性 */
    border-radius: 20px;
    /* 盒子阴影 */
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
        -18px -18px 30px rgba(255, 255, 255, 1);
    /* 过渡时间 ease-out是指先快速 后慢速 */
    transition: all 0.2s ease-out;
}
.contact-icon:hover {
    /* inset 是内部阴影 默认是外部阴影outset */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
}
.contact-icon:hover img {
    /* inset 是内部阴影 默认是外部阴影outset */
    width: 29px;
}
.contact-img {
    width: 30px;
    transition: all 0.2s ease-out;
}

.color-item{
      height: 12vh;
      padding-top: 6vh;

      .item-left{
            height: 50px;
            line-height: 50px;
            text-align: right;
            padding-right: 1vw;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:1;  /* 设置行数 */
            -webkit-box-orient: vertical;
      }
}
.color-edit{
      margin-top: 10vh;
}
</style>